<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list v-model:loading="loading" :finished="finished" :offset="10" :immediate-check="true" finished-text="没有更多了"
      @load="load">
      <!-- 商品卡片 -->
      <van-card v-for="(item, key) in list" :key="key" :thumb="item.product.thumbs_text"
        @click-thumb="toProductInfo(item.proid)">
        <template #title>
          <div class="title">{{ item.product.name }}</div>
        </template>

        <template #desc>
          <van-highlight :keywords="`${item.total}`" :source-string="`人数：${item.total} 人`" highlight-class="people" />
          拼团时间：{{ item.createtime_text }}(开始) ~ {{ item.endtime_text }}(结束)<br />
          拼团价格：￥{{ item.product.buy }}<br />
        </template>

        <template #footer>
          <van-button type="danger" size="small" @click="TeamJoin(item.id, item.proid)">参与拼团</van-button>
          <van-button type="warning" size="small" @click="TeamInfo(item.id)">查看详情</van-button>
        </template>

      </van-card>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'

const { proxy } = getCurrentInstance();

//判断是否有查询具体的商品的拼团
let proid = proxy.$route.query.pid ? proxy.$route.query.pid : 0;

//下拉刷新的数据
let list = ref([]) //数据列表
let page = ref(1)  //分页
let loading = ref(false) //加载状态
let finished = ref(false) //是否无更多数据
let refreshing = ref(false) //下拉刷新

//下拉刷新
const refresh = async () => {
  //清空查询参数
  page.value = 1
  list.value = []
  finished.value = false
  loading.value = true
  //加载数据方法
  load()
}

//加载数据方法 查询订单数据
const load = async () => {
  //判断是否为加载中的状态
  if (refreshing.value) {
    refreshing.value = false
  }

  // 发送请求
  var result = await proxy.$POST({
    url: '/team/index',
    params: {
      page: page.value,
      proid: proid
    }
  })

  //请求发送完毕后，加载状态也就完毕了
  loading.value = false

  //如果没有更多数据了 就说明已经加载到底了....
  if (result.code == 0) {
    finished.value = true
    return;
  }

  console.log(result.data)


  list.value = list.value.concat(result.data)
  page.value++
}

//跳转到购物车详情界面
const toProductInfo = pid => proxy.$router.push({ path: '/product/info', query: { pid } })

const TeamInfo = teamid => proxy.$router.push({ path: '/team/info', query: { teamid } })


//参与拼团
const TeamJoin = async (teamid, pid) => {
  //存放到cookie当中去
  if (teamid) {
    proxy.$cookies.set('teamid', teamid)
  }

  //跳转到商品详情界面去
  proxy.$router.push({ path: '/product/info', query: { pid } })
}

</script>


<style>
.people {
  color: red;
}
</style>

<style scoped>
:deep(.cart) {
  display: flex;
  width: 100%;
}

::v-deep .van-swipe-cell {
  width: 100%;
}

.delete-button {
  height: 100%;
}


.van-card {
  background-color: #fff;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.tag {
  margin-right: 5px;
}

.price {
  font-size: 14px;
  font-weight: bold;
}
</style>